<template>
    <div class="login">
        <div class="title">
            "战疫情"应急点餐系统
        </div>
        <div class="body">
            <el-card class="container">
                <el-form ref="form" :model="form" :rules="rules" label-width="60px" class="form">
                    <el-form-item label="部门" prop="department">
                        <el-select v-model="form.department" placeholder="请选择活动区域">
                            <el-option label="中心领导" value="中心领导"/>
                            <el-option label="办公室" value="办公室"/>
                            <el-option label="党群部" value="党群部"/>
                            <el-option label="科研部" value="科研部"/>
                            <el-option label="经管部" value="经管部"/>
                            <el-option label="矿区" value="矿区"/>
                            <el-option label="完整性" value="完整性"/>
                            <el-option label="自动化" value="自动化"/>
                            <el-option label="防腐" value="防腐"/>
                            <el-option label="测试" value="测试"/>
                            <el-option label="标准化" value="标准化"/>
                            <el-option label="工艺" value="工艺"/>
                            <el-option label="安环" value="工艺"/>
                            <el-option label="杂志社" value="杂志社"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" @keyup.enter.native="onSubmit"/>
                    </el-form-item>
                    <!--                <el-form-item label="部门管理员">-->
                    <!--                    <el-switch v-model="form.manager"></el-switch>-->
                    <!--                </el-form-item>-->
                    <el-form-item>
                        <el-button class="submit" type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import UserInfo from "@/common/UserInfo"
    import axios from 'axios'
    import utils from "@/common/Utils"


    @Component
    export default class Login extends Vue {
        form = {
            name: '',
            department: '',
        }

        rules = {
            department: [
                {required: true, message: '请选择所属部门', trigger: 'change'}
            ],
            name: [
                {required: true, message: '请输入名称', trigger: 'blur'},
            ],
        }

        onSubmit() {

            this.form.name = this.form.name.trim()

            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
            //@ts-ignore
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.getAJAXUserInfo()
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });


        }

        getAJAXUserInfo() {
            const user: UserInfo = {
                department: this.form.department,
                name: this.form.name,
            }

            axios.post(
                utils.getFullURL('/user/'),
                user
            ).then((resp) => {
                this.doLogin(resp.data as UserInfo)
            }).catch(reson => {
                //console.log(reson.response.data)
                this.$message.error('系统错误，请刷新重试或联系管理员。。。   错误原因：' + reson.response.data.message);
            })
        }

        doLogin(user: UserInfo) {
            localStorage.setItem('userInfo', JSON.stringify(user))
            this.$store.commit('setUserInfo', user)
        }
    }
</script>


<style scoped lang="scss">

    .login {
        background-color: #2c3e50;
        height: 100%;


        .title {
            height: 150px;
            line-height: 100px;
            font-size: 32px;
            color: white;
            text-align: center;


        }

        .body {
            .container {
                width: 310px;
                height: 240px;
                margin: auto;

                .form {
                    width: 100%;
                    margin: 20px auto;

                    .submit {
                        float: right;
                    }

                }
            }
        }


    }
</style>
